/*style.css*/
body > * {
    background-repeat: no-repeat;
}

div.cover img {
    /*transform: scale(120%,100%);*/
    display: flow;
    max-height: 150%;
    max-width: 150%;
}

.navbar, .footer nav {
    background-image: url(img/bgdanghang3.png);
    background-repeat: no-repeat;
    background-size: contain;


    font-size: 100%;
    height: 100%;
    width: 80%;
    display: inline-block;
    padding: 1em;
}

.navbar a, .footer nav p {
    color: white;
    padding: 0;
    margin-top: 0;
    margin-left: 1em;
    float: left;
    font-size: 100%;
    line-height: 50%;
}

.navbar a:hover {
    color: purple;
}

div.columns {
    display: flex;
    /*justify-content: left;*/
    text-align: center;
    /*padding: 5%;*/
    background-size: 100%;
}

div.columns > * {
    background-image: url(img/bgc1.jpg);
    /*justify-content: left;*/
    text-align: center;
    padding: 1.5%;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 1%;
}

div.columns > .yellow {
    background-image: url(img/bgc2.jpg);
}

div.columns > .blue {
    background-image: url(img/bgc3.jpg);
}

div.columns > .green {
    background-image: url(img/bgc4.jpg);
}

div.columns > .orange {
    background-image: url(img/bgc5.jpg);
}

div.columns p strong {
    color: gray;
    font-size: 120%;
}

div.bulletin {
    line-height: 90%;
    background-image: url(img/bggonggao.jpg);
}

div.bulletin p strong {
    color: #eeffffff;
}

.selections {
    /*background-image: url(img/bggundong.jpg);*/
    display: flex;

}

.selections > * {
    background-repeat: no-repeat;
}

.selections .book-selection {
    background: url(img/bggundong.jpg) top center no-repeat;
    /*background-size: 120%;*/
    background-size: contain;
    display: flow;
    margin-right: 20%;

}

.selections .book-selection .content {
    padding: 1%;
    margin-left: 7.5%;
}

.selections img {
    width: 15%;
    padding: .2%;
    margin-top: 3%;
    margin-bottom: 3%;
}

.selections .first {
    border-left: 10px transparent;
    margin-left: 10%;
}

.selections .last {
    border-right: 10px transparent;;
    margin-right: 10%;
}

.selections .query {
    background-image: url(img/bgziyuan.jpg);
    background-repeat: no-repeat;
    width: 25%;
    background-size: contain;
}

.selections .query .content {
    /*background-image: url(img/bgziyuan.jpg);*/
    /*background-size: contain;*/
    display: grid;
    padding: .5%;
    margin-top: 20%;
    width: 120%;
    line-height: 100%;
}

.selections .query .content > * {
    /*width: 80%;*/
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}

.selections .query .content p {
    color: white;
    width: 100%;
}

.selections .query .content label {
    color: gray;
    font-style: normal;
    font-size: .8em;
    width: 100%;
}
.selections input{
    width: 50%;
}
.selections .query .content button {
    width: 20%;
    height: 100%;
    padding: 1%;
}

.selections .query .content .query-result {
    color: black;

}

.database {
    background-image: url(img/bgshujuku1.jpg);
    background-repeat: no-repeat;
    padding: 4.2%;
    height: 100%;
    width: 100%;
}

.database img {
    margin-top: 3px;
}

.footer nav {
    background-image: url(img/bgcp.jpg);
    justify-items: center;
}

.footer nav p {
    color: black;
    padding: .5%;
    text-align: center;
    margin-left: 1%;

}

.footer .copyright {
    align-items: center;
}

.footer .copyright p {
    color: gray;
}